<template>
	<view v-if="loaded" class="container">
		<view class="nav-wrap">
			<uni-navbar
				@tabClick="tabClick"
				:navList="navList"
				:tabCurrentIndex="tabCurrentIndex"
				:borderColor="themeStyles.lightMainColor"
			></uni-navbar>
		</view>
		<view class="content">
			<!-- 空白页 -->
			<empty
				v-if="loadingType !== 'loading' && !goodsList.length"
				:src="baseTemplateFileUri + 'image/emptyStatus/common.png'"
			></empty>
			<view v-else class="goods-wrap">
				<!-- 正在参与的 begin -->
				<!-- <col-goodsList
          :goodsList="goodsList"
        ></col-goodsList> -->
				<uni-m-goods-col
					v-for="(item, index) in goodsList"
					:key="index"
					:goods="item"
					:goodsPrice="item.priceStr.split('.')"
					:latePrice="item.priceOut"
					:additionalText="
						`已拼${item.joinPeople}人，还差${item.shortPeople}人`
					"
					:routeLink="
						`/pages/activity/pages/group?joinId=${item.groupTeamId}`
					"
				>
					<view
						slot="goodsType"
						:style="themeStyles.textAdronmentColor"
					>
						<view
							v-if="item.filtrateStatus === 0"
							class="goods-countdown"
						>
							<text>距离结束</text>
							<uni-countdown
								:showDay="false"
								:color="themeStyles.adronmentColor"
								:splitorColor="themeStyles.adronmentColor"
								:hour="item.countdown.hh"
								:minute="item.countdown.mm"
								:second="item.countdown.ss"
							>
							</uni-countdown>
						</view>
						<template v-else>
							<view>
								<template v-if="item.shortPeople === 0"
									>拼团成功</template
								>
								<template v-else>拼团失败</template>
							</view>
						</template>
					</view>
					<view slot="metaRight">
						<button
							v-if="item.filtrateStatus === 0"
							:style="{
								color: themeStyles.auxiliaryColor,
								background: `linear-gradient(160deg, ${themeStyles.mainColor}80, ${themeStyles.mainColor})`
							}"
							class="df ai-c jc-c goods-btn"
						>
							拼
						</button>
					</view>
				</uni-m-goods-col>
				<!-- 正在参与的 end -->
				<uni-load-more :status="loadingType"></uni-load-more>
			</view>
		</view>
	</view>
</template>

<script>
/** api begin */

import { queryMyGroupList } from "@/lib/api/groupServer/group";

/** api end */

/** components begin */
import uniNavbar from "@/components/uniNavbar/uniNavbar";
import uniMGoodsCol from "@/components/goods/uniMGoodsCol";
import uniLoadMore from "@/components/uniLoadMore/uniLoadMore";
import uniCountdown from "@/components/uniCountdown/uniCountdown.vue";
import empty from "@/components/empty";
/** components end */

let currentPage = 1;
export default {
	components: {
		uniNavbar,
		uniMGoodsCol,
		uniLoadMore,
		uniCountdown,
		empty
	},
	data() {
		return {
			navList: [
				{
					text: "进行中"
				},
				{
					text: "已完成"
				}
			],
			goodsList: [],
			tabCurrentIndex: 0
		};
	},

	async onLoad() {
		currentPage = 1;
	},

	onShow() {
		this.getMyGroupList();
	},

	//下拉刷新
	async onPullDownRefresh() {
		currentPage = 1;
		await this.getMyGroupList();
		uni.stopPullDownRefresh();
	},

	onReachBottom() {
		if (this.loadingType === "more") {
			currentPage++;
			this.getMyGroupList();
		}
	},

	methods: {
		tabClick(index) {
			console.log("index", index);
			if (this.tabCurrentIndex === index) {
				return;
			}
			currentPage = 1;
			this.tabCurrentIndex = index;
			this.getMyGroupList();
		},
		// 获取我的拼团列表
		async getMyGroupList() {
			this.loadingType = "loading";
			const propsData = {
				currentPage,
				filtrateStatus: this.tabCurrentIndex
			};

			try {
				const res = await queryMyGroupList(propsData);
				// if (res.data.list.length) {
				//   res.data.list.forEach((item, index) => {
				//     res.data.list[index].price = item.priceStr.split(".");
				//   });
				// }
				// res.data.list = this.splitGoodsPrice(
				//   res.data.list,
				//   "price",
				//   "priceStr"
				// );
				if (currentPage === 1) {
					this.goodsList = res.data.list;
				} else {
					this.goodsList = this.goodsList.concat(res.data.list);
				}
				const noMore = this.goodsList.length >= res.data.total;
				this.loadingType = noMore ? "noMore" : "more";
				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				await this.$api.showToast(error.resultInfo || "加载失败");
				uni.navigateBack();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import "@/pages/activity/styles/myGroup.scss";
</style>